<!DOCTYPE html>
<html>

<head>
  <title>React中的合成事件</title>
  <meta charset='utf-8'>
  <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
  <style>
    #preview-contents {
      margin-top: -20px;
    }
  </style>
</head>

<body>
  <div id='preview-contents' class='note-content'>



    <h3 id="react中的合成事件">React中的合成事件</h3>

    <blockquote>
      <p>Synthetic /sɪnˈθetɪk/ Event <br>
        合成事件是围绕浏览器原生事件，充当跨浏览器包装器的对象；它们将不同浏览器的行为合并为一个 API，这样做是为了确保事件在不同浏览器中显示一致的属性！</p>
    </blockquote>

    <h4 id="合成事件的基本操作">合成事件的基本操作</h4>

    <p><strong>基础语法</strong> <br>
      在JSX元素上，直接基于 <code>onXxx={函数}</code> 进行事件绑定！ <br>
      浏览器标准事件，在React中大部分都支持 <br>
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events#%E6%A0%87%E5%87%86%E4%BA%8B%E4%BB%B6"
        target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/Events#%E6%A0%87%E5%87%86%E4%BA%8B%E4%BB%B6</a>
    </p>



    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
</div><div class="hljs-line">    state = {
</div><div class="hljs-line">        <span class="hljs-attr">num</span>: <span class="hljs-number">0</span>
</div><div class="hljs-line">    };
</div><div class="hljs-line">    render() {
</div><div class="hljs-line">        <span class="hljs-keyword">let</span> { num } = <span class="hljs-keyword">this</span>.state;
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            {num}</span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{(ev)</span> =&gt;</span> {</span>
</div><div class="hljs-line"><span class="xml">                // 合成事件对象 ：SyntheticBaseEvent</span>
</div><div class="hljs-line"><span class="xml">                console.log(ev); </span>
</div><div class="hljs-line"><span class="xml">                this.setState({</span>
</div><div class="hljs-line"><span class="xml">                    num: num + 1</span>
</div><div class="hljs-line"><span class="xml">                });</span>
</div><div class="hljs-line"><span class="xml">            }}&gt;处理<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>合成事件中的this和传参处理</strong> <br>
      在类组件中，我们要时刻保证，合成事件绑定的函数中，里面的this是当前类的实例！ <br>
      也需要保障传参的正常！</p>



    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
</div><div class="hljs-line">    handler1 = <span class="hljs-function">(<span class="hljs-params">ev</span>) =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-built_in">console</span>.log(ev, <span class="hljs-keyword">this</span>);
</div><div class="hljs-line">    };
</div><div class="hljs-line">    handler2 = <span class="hljs-function">(<span class="hljs-params">x, y, ev</span>) =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-built_in">console</span>.log(x, y, ev, <span class="hljs-keyword">this</span>);
</div><div class="hljs-line">    };
</div><div class="hljs-line">    render() {
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.handler1}</span>&gt;</span>测试1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.handler2.bind(null,</span> <span class="hljs-attr">10</span>, <span class="hljs-attr">20</span>)}&gt;</span></span>
</div><div class="hljs-line"><span class="xml">                测试2</span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">};
</div></code></pre>

    <h4 id="js中的事件委托事件代理">JS中的事件委托（事件代理）</h4>

    <p>事件和事件绑定</p>

    <ul>
      <li>
        <p>事件是浏览器内置行为</p>
      </li>
      <li>
        <p>事件绑定是给事件行为绑定方法</p>

        <ul>
          <li>
            <p>元素.onxxx=function…</p>
          </li>
          <li>
            <p>元素.addEventListener(‘xxx’,function(){},true/false)</p>
          </li>
        </ul>
      </li>
    </ul>

    <p>事件的传播机制</p>

    <ul>
      <li>
        <p>捕获 CAPTURING_PHASE</p>
      </li>
      <li>
        <p>目标 AT_TARGET</p>
      </li>
      <li>
        <p>冒泡 BUBBLING_PHASE</p>
      </li>
    </ul>

    <p>阻止冒泡传播</p>

    <ul>
      <li>
        <p>ev.cancelBubble=true 「&lt;=IE8」</p>
      </li>
      <li>
        <p>ev.stopPropagation()</p>
      </li>
      <li>
        <p>ev.stopImmediatePropagation() 阻止监听同一事件的其他事件监听器被调用</p>
      </li>
    </ul>

    <p><img longdesc="./1657893058664.png" width="500" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <p><strong><code>事件委托(代理)，就是利用事件的“冒泡传播机制”实现的</code></strong> <br>
      例如：给父容器做统一的事件绑定（点击事件），这样点击容器中的任意元素，都会传播到父容器上，触发绑定的方法！在方法中，基于不同的事件源做不同的事情！</p>

    <ul>
      <li>
        <p>性能得到很好的提高「减少内存消耗」</p>
      </li>
      <li>
        <p>可以给动态增加的元素做事件绑定</p>
      </li>
      <li>
        <p>某些需求必须基于其完成</p>
      </li>
    </ul>



    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> container = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.container'</span>),
</div><div class="hljs-line">    box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.box'</span>);
</div><div class="hljs-line">container.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> target = ev.target,
</div><div class="hljs-line">        targetTag = target.tagName,
</div><div class="hljs-line">        targetClass = target.classList;
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (targetTag === <span class="hljs-string">'BUTTON'</span> &amp;&amp; targetClass.contains(<span class="hljs-string">'submit'</span>)) {
</div><div class="hljs-line">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'我是按钮'</span>);
</div><div class="hljs-line">        <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (targetTag === <span class="hljs-string">'A'</span> &amp;&amp; targetClass.contains(<span class="hljs-string">'link'</span>)) {
</div><div class="hljs-line">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'我是超链接按钮'</span>);
</div><div class="hljs-line">        <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'我是新增的PBOX'</span>);
</div><div class="hljs-line">});
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">box.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'我是DIV盒子'</span>);
</div><div class="hljs-line">    ev.stopPropagation();
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> pBox = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'p'</span>);
</div><div class="hljs-line">    pBox.className = <span class="hljs-string">'p-box'</span>;
</div><div class="hljs-line">    pBox.innerHTML = <span class="hljs-string">'我是P段落盒子'</span>;
</div><div class="hljs-line">    container.appendChild(pBox);
</div><div class="hljs-line">}, <span class="hljs-number">2000</span>);
</div></code></pre>

    <h4 id="合成事件的底层机制">合成事件的底层机制</h4>

    <blockquote>
      <p>总原则：基于事件委托实现</p>
    </blockquote>

    <p><code>React17及以后，是委托给#root元素</code></p>



    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> root = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#root'</span>),
</div><div class="hljs-line">    outer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.outer'</span>),
</div><div class="hljs-line">    inner = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.inner'</span>);
</div><div class="hljs-line"><span class="hljs-comment">/* 原理 */</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> dispatchEvent = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dispatchEvent</span>(<span class="hljs-params">ev, isCapture</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> path = ev.path,
</div><div class="hljs-line">        target = ev.target;
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (isCapture) {
</div><div class="hljs-line">        [...path].reverse().forEach(<span class="hljs-function"><span class="hljs-params">elem</span> =&gt;</span> {
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> handler = elem.onClickCapture;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> handler === <span class="hljs-string">"function"</span>) handler(ev);
</div><div class="hljs-line">        });
</div><div class="hljs-line">        <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">    path.forEach(<span class="hljs-function"><span class="hljs-params">elem</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-keyword">let</span> handler = elem.onClick;
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> handler === <span class="hljs-string">"function"</span>) handler(ev);
</div><div class="hljs-line">    });
</div><div class="hljs-line">};
</div><div class="hljs-line">root.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    dispatchEvent(ev, <span class="hljs-literal">false</span>);
</div><div class="hljs-line">}, <span class="hljs-literal">false</span>);
</div><div class="hljs-line">root.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    dispatchEvent(ev, <span class="hljs-literal">true</span>);
</div><div class="hljs-line">}, <span class="hljs-literal">true</span>);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">......
</div></code></pre>

    <p><code>React17以前，是委托给document元素，并且没有实现捕获阶段的派发</code></p>



    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> outer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.outer'</span>),
</div><div class="hljs-line">    inner = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.inner'</span>);
</div><div class="hljs-line"><span class="hljs-comment">/* 原理 */</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> dispatchEvent = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dispatchEvent</span>(<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> path = ev.path,
</div><div class="hljs-line">        target = ev.target;
</div><div class="hljs-line">    [...path].reverse().forEach(<span class="hljs-function"><span class="hljs-params">elem</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-keyword">let</span> handler = elem.onClickCapture;
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> handler === <span class="hljs-string">"function"</span>) handler(ev);
</div><div class="hljs-line">    });
</div><div class="hljs-line">    path.forEach(<span class="hljs-function"><span class="hljs-params">elem</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-keyword">let</span> handler = elem.onClick;
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> handler === <span class="hljs-string">"function"</span>) handler(ev);
</div><div class="hljs-line">    });
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    dispatchEvent(ev);
</div><div class="hljs-line">}, <span class="hljs-literal">false</span>);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">......
</div></code></pre>

    <p><code>事件对象池</code> <br>
      16版本中，存在事件对象池</p>

    <ul>
      <li>
        <p>缓存和共享：对于那些被频繁使用的对象，在使用完后，不立即将它们释放，而是将它们缓存起来，以供后续的应用程序重复使用，从而减少创建对象和释放对象的次数，进而改善应用程序的性能！</p>
      </li>
      <li>
        <p>使用完成之后，释放对象「每一项内容都清空」，缓存进去！</p>
      </li>
      <li>
        <p>调用 event.persist() 可以保留住这些值！</p>
      </li>
    </ul>

    <p>17版本及以后，移除了事件对象池！</p>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line">syntheticInnerBubble = <span class="hljs-function">(<span class="hljs-params">syntheticEvent</span>) =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-comment">// syntheticEvent.persist();    </span>
</div><div class="hljs-line">    setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-built_in">console</span>.log(syntheticEvent); <span class="hljs-comment">//每一项都置为空</span>
</div><div class="hljs-line">    }, <span class="hljs-number">1000</span>);
</div><div class="hljs-line">};
</div></code></pre>

    <h4 id="click延迟和vue中的事件处理机制">click延迟和Vue中的事件处理机制</h4>

    <p>click事件在移动端存在<code>300ms</code>延迟</p>

    <ul>
      <li>
        <p>pc端的click是点击事件</p>
      </li>
      <li>
        <p>移动端的click是单击事件</p>
      </li>
    </ul>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom/client'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 解决移动端300ms延迟</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> fastclick <span class="hljs-keyword">from</span> <span class="hljs-string">'fastclick'</span>;
</div><div class="hljs-line">fastclick.attach(<span class="hljs-built_in">document</span>.body);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> root = ReactDOM.createRoot(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>));
</div><div class="hljs-line">root.render(
</div><div class="hljs-line">  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span></span>
</div><div class="hljs-line"><span class="xml">);</span>
</div></code></pre>

    <p>也可以自己基于touch事件模型去实现</p>



    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.box'</span>);
</div><div class="hljs-line">box.ontouchstart = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> point = ev.changedTouches[<span class="hljs-number">0</span>];
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.startX = point.pageX;
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.startY = point.pageY;
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.isMove = <span class="hljs-literal">false</span>;
</div><div class="hljs-line">};
</div><div class="hljs-line">box.ontouchmove = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> point = ev.changedTouches[<span class="hljs-number">0</span>];
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> changeX = point.pageX - <span class="hljs-keyword">this</span>.startX;
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> changeY = point.pageY - <span class="hljs-keyword">this</span>.startY;
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (<span class="hljs-built_in">Math</span>.abs(changeX) &gt; <span class="hljs-number">10</span> || <span class="hljs-built_in">Math</span>.abs(changeY) &gt; <span class="hljs-number">10</span>) {
</div><div class="hljs-line">        <span class="hljs-keyword">this</span>.isMove = <span class="hljs-literal">true</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">};
</div><div class="hljs-line">box.ontouchend = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.isMove) {
</div><div class="hljs-line">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'点击触发'</span>);
</div><div class="hljs-line">    }
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>Vue中的事件处理机制</strong></p>

    <blockquote>
      <p>核心：给创建的DOM元素，单独基于<code>addEventListener</code>实现事件绑定 <br>
        Vue事件优化技巧：手动基于事件委托处理</p>
    </blockquote>



    <pre class="prettyprint hljs-dark"><code class="language-html hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"handler"</span>&gt;</span>
</div><div class="hljs-line">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span></span>
</div><div class="hljs-line"><span class="hljs-tag">        <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span></span>
</div><div class="hljs-line"><span class="hljs-tag">        <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item, index) in arr"</span></span>
</div><div class="hljs-line"><span class="hljs-tag">        <span class="hljs-attr">:data-item</span>=<span class="hljs-string">"item"</span></span>
</div><div class="hljs-line"><span class="hljs-tag">        <span class="hljs-attr">:key</span>=<span class="hljs-string">"index"</span></span>
</div><div class="hljs-line"><span class="hljs-tag">      &gt;</span>
</div><div class="hljs-line">        {{ item }}
</div><div class="hljs-line">      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
</div><div class="hljs-line">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {</span>
</div><div class="hljs-line"><span class="javascript">  <span class="hljs-attr">name</span>: <span class="hljs-string">"App"</span>,</span>
</div><div class="hljs-line"><span class="javascript">  data() {</span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-keyword">return</span> {</span>
</div><div class="hljs-line"><span class="javascript">      <span class="hljs-attr">arr</span>: [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>],</span>
</div><div class="hljs-line"><span class="javascript">    };</span>
</div><div class="hljs-line"><span class="javascript">  },</span>
</div><div class="hljs-line"><span class="javascript">  <span class="hljs-attr">methods</span>: {</span>
</div><div class="hljs-line"><span class="javascript">    handler(ev) {</span>
</div><div class="hljs-line"><span class="javascript">      <span class="hljs-keyword">let</span> target = ev.target;</span>
</div><div class="hljs-line"><span class="javascript">      <span class="hljs-keyword">if</span> (target.tagName === <span class="hljs-string">"LI"</span>) {</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-built_in">console</span>.log(target.getAttribute(<span class="hljs-string">"data-item"</span>));</span>
</div><div class="hljs-line"><span class="javascript">      }</span>
</div><div class="hljs-line"><span class="javascript">    },</span>
</div><div class="hljs-line"><span class="javascript">  },</span>
</div><div class="hljs-line"><span class="javascript">};</span>
</div><div class="hljs-line"><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>
  </div>
</body>

</html>